<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Game Center</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-latest.js"></script>

        <script src="js/global.js"></script>
        <script src="js/highcharts.js"></script>
        <script src="js/exporting.js"></script>

        <script src="js/positionChart.js"></script>                
        <script src="js/stackedBarChart.js"></script>   
        <script>
            function toggle(tog){
                if(tog=="Position"){
                    document.getElementById("tabs").innerHTML="";
                    positionChart();
                }else{
                    document.getElementById("tabs").innerHTML="";
                    stackedBarChart();
                }
            }
        </script>

       <!-- jquery DataTable !-->
        <h:outputStylesheet name="../resources/DataTables-1.9.4/media/css/jquery.dataTables.css"/>
        <h:outputScript name="../resources/DataTables-1.9.4/media/js/jquery.js"/>
        <h:outputScript name="../resources/DataTables-1.9.4/media/js/jquery.dataTables.js"/>>
        <script language="javascript">
            $(document).ready(function(){
                $("[id$='team1']").dataTable();
                $("[class$='dataTable']").dataTable();
                $("[id$='DataTable']").dataTable();
                $("div.navy").load("../navy.xhtml");
            });
        </script>

    </h:head>
    <h:body>
        <div id="background">
            <div class="navy"></div>
            <div id="content">
                <div id="gamecenterDiv">
                    <span class="whiteHeader">Game Center</span><br/><br/>
                    
                    <button class="short" id="byTeam" onclick="toggle('Position');">
                        <span class="white">Position</span>
                    </button>
                    <button class="short" id="byRound" onclick="toggle('Stack');">
                        <span class="white">Stack</span>
                    </button><br/>
                    <div style="float:left; width: 160px;position: absolute;top:0px;left:1100px;background: gray;">
                        <f:view>
                            <h:form>
                                <h:dataTable class="dataTable" binding="#{gameCenterBean.table1}" value="#{gameCenterBean.matchList.get(0)}" var="item">
                                    <f:facet name="header">
                                        <h:outputText value="Week 1"/>
                                    </f:facet>
                                    <h:column>
                                        <h:commandButton action="#{gameCenterBean.selectMatch1()}" value="#{item.homeTeamId.name} vs #{item.awayTeamId.name}" style="cursor:pointer;border:none; background:none;font-size:12px;"/>
                                    </h:column>
                                </h:dataTable>
                                <h:dataTable class="dataTable" binding="#{gameCenterBean.table2}" value="#{gameCenterBean.matchList.get(1)}" var="item">
                                    <f:facet name="header">
                                        <h:outputText value="Week 2"/>
                                    </f:facet>
                                    <h:column>
                                        <h:commandButton action="#{gameCenterBean.selectMatch2()}" value="#{item.homeTeamId.name} vs #{item.awayTeamId.name}" style="cursor:pointer;border:none; background:none;font-size:12px;"/>
                                    </h:column>
                                </h:dataTable>
                            </h:form>
                        </f:view>
                    </div>
                    <div id="tabs" style="float:left; min-width: 880px; height: 400px; margin: 0 auto"></div>
                    <br/><br/>
                    <div></div>
                    <div style="width:440px;height:800px;float:left;">
                        <f:view>
                            <h:form>
                                <h:outputText class="white" value="#{gameCenterBean.selectedMatch.homeTeamId.name}"/>
                                <br/>
                                <h:outputText class="white" value="STARTER"/>
                                <h:dataTable id="starterDataTableHome" value="#{gameCenterBean.homePlayers}" var="item" class="dataTable">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="POS"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.fantasyPositionInRoster}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Player"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.playerId.firstName} #{item.player.playerId.lastName}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="OPP"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.opponent}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Points"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.fantasyPoints}"/>
                                    </h:column>
                                </h:dataTable>
                                <h:outputText class="white" value="Total Points: #{gameCenterBean.homestaterpoints}"/>
                                <br/>
                                <h:outputText class="white" value="BENCH"/>
                                <h:dataTable class="dataTable" value="#{gameCenterBean.homeBNPlayers}" var="item">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="POS"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.fantasyPositionInRoster}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Player"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.playerId.firstName} #{item.player.playerId.lastName}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="OPP"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.opponent}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Points"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.fantasyPoints}"/>
                                    </h:column>
                                </h:dataTable>
                                <h:outputText class="white" value="Total Points: #{gameCenterBean.homebenchpoints}"/>
                            </h:form>
                        </f:view>
                    </div>
                    <div class="space60"></div>
                    <div style="width:440px;height:800px;float:left;">
                        <f:view>
                            <h:form>
                                <h:outputText class="white" value="#{gameCenterBean.selectedMatch.awayTeamId.name}"/>
                                <br/>
                                <h:outputText class="white" value="STARTER"/>
                                <h:dataTable id="starterDataTableAway" value="#{gameCenterBean.awayPlayers}" var="item" class="dataTable">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="POS"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.fantasyPositionInRoster}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Player"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.playerId.firstName} #{item.player.playerId.lastName}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="OPP"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.opponent}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Points"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.fantasyPoints}"/>
                                    </h:column>
                                </h:dataTable>
                                <h:outputText class="white" value="Total Points: #{gameCenterBean.awaystaterpoints}"/>
                                <br/>
                                <h:outputText class="white" value="BENCH"/>
                                <h:dataTable class="dataTable" value="#{gameCenterBean.awayBNPlayers}" var="item">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="POS"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.fantasyPositionInRoster}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Player"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.playerId.firstName} #{item.player.playerId.lastName}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="OPP"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.opponent}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Points"/>
                                        </f:facet>
                                        <h:outputText value="#{item.game.fantasyPoints}"/>
                                    </h:column>
                                </h:dataTable>
                                <h:outputText class="white" value="Total Points: #{gameCenterBean.awaybenchpoints}"/>
                            </h:form>
                        </f:view>
                    </div>
                </div>
            </div>
            <script>
                $(document).ready(function(){
                    positionChart();
                    //stackedBarChart();
                });
            </script>


        </div>
    </h:body>
</html>
